:root {
	--mode-colorFree: #cc33bb;
	--mode-colorAdv: #00aabb;
	--mode-color: #00aabb;
	--background-color: #000000;
	--text-color: #ffffff;
}

/* cyrillic-ext */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiYySUhiCXABTV.woff) format('woff');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUJiYySUhiCXABTV.woff) format('woff');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* vietnamese */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUliYySUhiCXABTV.woff) format('woff');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUhiYySUhiCXABTV.woff) format('woff');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYySUhiCXAA.woff) format('woff');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

::-webkit-input-placeholder {
	/* Edge */
	color: #225566;
}

:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #225566;
}

::placeholder {
	color: #225566;
}

a {
	color: var(--mode-color);
	text-decoration: none;
}

a:hover {
	color: #ffffff;
	text-decoration: none;
}

body {
	padding: 0cm;
	margin: 0cm;
	background-color: var(--background-color);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	font-size: 0.5cm;
	font-family: 'Oswald', sans-serif;
	color: var(--text-color);
	user-select: none;
}

h1 {
	font-size: 0.75cm;
}

#adMobCounter {
	position: fixed;
	z-index: 9;
	align-items: left;
	margin: 0.15cm;
	font-size: 0.75cm;
}

#playButtonDiv {
	background-color2: #dd6622;
	z-index: 6;
	bottom: 1.5cm;
	overflow: hidden;
	position: fixed;
	justify-content: center;
	display: flex;
	width: 100%;
	height: 2cm;
}

#menuPlayButton222 {
	width: 1.5cm;
	height: 1.5cm;
}

#menuDiv {
	overflow: hidden;
	background-color: #00aabb;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 5;
	-webkit-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.75);
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.75);
	padding: 0.1cm;
	justify-content: center;
	display: flex;
}

#playDiv {
	padding: 0cm;
	margin: 0cm;
	_background-image: url('80th2.gif');
	_background-repeat: no-repeat;
	_background-attachment: fixed;
	_background-size: cover;
	_background-position: center;
	background-color: #000000;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 2;
	display: none;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#recordFog {
	padding: 0cm;
	margin: 0cm;
	background-color: rgba(0, 0, 0, 0.9);
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 14;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	display: none;
}
#partFog {
	padding: 0cm;
	margin: 0cm;
	background-color: rgba(0, 0, 0, 0.5);
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 3;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	display: flex;
}

#partDrums {
	background-color: #000000;
	padding: 0cm;
	margin: 0cm;
	position: fixed;
	width: 25%;
	height: 100%;
	top: 0;
	left: 0;
	right: 75%;
	bottom: 0;
}

#partBass {
	background-color: #000000;
	padding: 0cm;
	margin: 0cm;
	position: fixed;
	width: 25%;
	height: 100%;
	top: 0;
	left: 25%;
	right: 50%;
	bottom: 0;
}

#partLead {
	background-color: #000000;
	padding: 0cm;
	margin: 0cm;
	position: fixed;
	width: 25%;
	height: 100%;
	top: 0;
	left: 50%;
	right: 25%;
	bottom: 0;
}

#partPad {
	background-color: #000000;
	padding: 0cm;
	margin: 0cm;
	position: fixed;
	width: 25%;
	height: 100%;
	top: 0;
	left: 75%;
	right: 0;
	bottom: 0;
}

.partImage {
	padding: 0cm;
	margin: 0cm;
	width: 100%;
	top: 0;
}

#pauseDiv {
	padding: 0cm;
	margin: 0cm;
	_background-image: url('80th2.jpg');
	_background-repeat: no-repeat;
	_background-attachment: fixed;
	_background-size: cover;
	_background-position: center;
	background-color: #003344;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#fogInitDiv {
	padding: 0cm;
	margin: 0cm;
	background-color: rgba(0, 0, 0, 0.912);
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	display: flex;
}

#midiShareDiv {
	padding: 0cm;
	margin: 0cm;
	background-color: rgba(0, 0, 0, 0.912);
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 11;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	display: none;
}

#midiExportDiv {
	padding: 0cm;
	margin: 0cm;
	background-color: rgba(0, 0, 0, 0.912);
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 12;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content: center;
	align-items: center;
	display: none;
	flex-direction: column;
}

#appOptionsDiv {
	padding: 0.25cm;
	margin: 0cm;
	background-color: rgba(0, 0, 0, 0.912);
	overflow: scroll;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 11;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content2: center;
	align-items: center;
	display: none;
	flex-direction: column;
}

#appOptionsDiv p {
	font-size: 0.5cm;
	margin: 0.0cm;
	padding: 0.1cm;
	background-color3: #ff00ff;
}

.maxWidth16 {
	max-width: 16cm;
	background-color2: #663399;
	margin: 0.1cm;
}

.optionsSlider {
	width: 5cm;
	outline: none;

	-webkit-appearance: none;
	width222: 96%;
	height: 0.05cm;
	border-radius: 5px;
	background222: linear-gradient(90deg, rgba(128, 128, 255, 1) 0%, rgba(0, 255, 255, 1) 50%, rgba(255, 128, 0, 1) 100%);
	background: var(--mode-color);
	outline22: none;
	margin-left: 2%;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
}

.optionsSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0.25cm;
	height: 0.25cm;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.optionsSlider::-moz-range-thumb {
	width: 0.25cm;
	height: 0.25cm;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.selectionListDiv {
	padding: 0.25cm;
	margin: 0cm;
	background-color: rgba(0, 0, 0, 0.912);
	overflow: scroll;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 11;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	justify-content2: center;
	align-items: center;
	display: none;
	flex-direction: column;
}

.selectionListDiv p {
	font-size: 0.5cm;
	margin: 0.0cm;
	padding: 0.1cm;
	background-color3: #ff00ff;
}

.unselListItem {
	color: var(--mode-color);
}

.selectedListItem {
	color: #ffffff;
}

#diceDiv {
	padding: 0cm;
	margin: 0cm;
	_background-color: rgba(0, 0, 0, 0.912);
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 4;
	justify-content: center;

	align-items: center;
	display: flex;
	flex-direction: column;
}

.diceStart {
	padding-left: 0cm;
	padding-right: 0cm;
	padding-top: 0.1cm;
	padding-bottom: 0.5cm;
	margin: 0cm;
	width: 1.5cm;
	height: 1.5cm;
	border: none;
	outline: none;
	filter: url(#shadowline);
}

.diceSubStart {
	padding-left: 0cm;
	padding-right: 0cm;
	padding-top: 0.1cm;
	padding-bottom: 0.75cm;
	margin: 0cm;
	width: 1.0cm;
	height: 1.0cm;
	border: none;
	border11: 4px;
	outline: none;
	filter: url(#shadowline);
	background-color11: rgba(0, 255, 0, 0.912);
}



.fogInitButton {
	padding: 0.1cm;
	margin: 0cm;
	width: 4.0cm;
	height: 4.0cm;
	border: none;
	outline: none;
	
	
}

.menuButton {
	padding: 0.1cm;
	margin: 0cm;
	width: 1.0cm;
	height: 1.0cm;
	border: none;
	outline: none;
	filter: url(#shadowline);
}

.smallFont {
	font-size: 0.33cm;
}

.verySmallFont {
	font-size: 0.25cm;
}

.auxText {
	color: var(--mode-color);

}

.curChordProgTitle {
	margin-bottom: 0.5cm;
	font-size: 0.33cm;
	filter: url(#shadowline);
}

.progSlider {
	-webkit-appearance: none;
	width: 96%;
	height: 0.05cm;
	border-radius: 5px;
	background: linear-gradient(90deg, rgba(128, 128, 255, 1) 0%, rgba(0, 255, 255, 1) 50%, rgba(255, 128, 0, 1) 100%);
	outline: none;
	margin-left: 2%;
	margin-right: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	filter: url(#shadowline);
}

.progSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 0.25cm;
	height: 0.25cm;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

.progSlider::-moz-range-thumb {
	width: 0.25cm;
	height: 0.25cm;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

#progSliderRow {
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0.05cm;
	margin-bottom: 0.5cm;
}

.diceButton {
	padding-left: 0.0cm;
	padding-right: 0.0cm;
	padding-top: 0.5cm;
	padding-bottom: 0cm;
	margin: 0.0cm;
	width: 25%;
	height: 1.75cm;
	
	background11: #f0f;
	filter: url(#shadowline);
}

.menuStub {
	height: 1.7cm;
	width: 100%;
}

#genControlsRow {
	padding: 0.0cm;
	margin: 0.0cm;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%
}

#roundDrums {
	transform-origin: 50% 50%;
}

#roundBass {
	transform-origin: 50% 50%;
}

#roundLead {
	transform-origin: 50% 50%;
}

#roundPad {
	transform-origin: 50% 50%;
}

.closeSettingDiv {
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 88;
	padding-left: 0cm;
	padding-right: 0.5cm;
	padding-top: 0.1cm;
	padding-bottom: 0.5cm;
	display: flex;
}

.showUndoDiv {
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 5;
	padding-left: 0cm;
	padding-right: 0.1cm;
	padding-top: 0.3cm;
	padding-bottom2: 0.5cm;
	display: flex;
}

#exportLabel {
	padding: 0.5cm;
}

.alignRight {
	text-align: right;
}

.trackOptRow {
	display: flex;
	flex-direction: row;

}

.trackNameSliderPart {
	flex-shrink: 3;
}

.active8cell {
	color: #00ffff;
}

#alertDiv {
	position: absolute;
	z-index: 15;
	bottom: 3cm;
	text-align: center;
	width: 100%;
	display:none;
}

#alertBg {
	background-color: var(--mode-color);
	width: 5cm;
	height: 2cm;
	margin: auto;
	border-radius: 0.25cm;
}
#alertLine {
	background-color: #000000;
	width: 100%;
	height: 0.05cm;
}

#alertTime {
	background-color: #ffffff;
	width: 1%;
	height: 0.05cm;
}
#menuProgChordButton{
	filter:none;
}
#menuRecordingButton{
	filter:none;
}
#menuMIDIButton{
	filter:none;
}
#menuShareButton{
	filter:none;
}

.blackKey {
	fill: #333;
	stroke-width: 1;
	stroke: #ccc
}
.whiteKey {
	fill: #fff;
	stroke-width: 1;
	stroke: #ccc
}
.checkedKey {
	fill: var(--mode-color);
	stroke-width: 1;
	stroke: #ccc
}

.fretLine {
	fill: #333;
}
.fret0 {
	fill: #666;
}
.stringLine {
	fill: #ccc;
}